<template>
  <div>
    <el-card shadow="never">
      <div slot="header">
        <el-button @click="handleBack">返回</el-button>
      </div>
      <el-tabs class="classify-tabs" :tab-position="tabPosition">
        <el-tab-pane
          v-for="(item,index) in listData"
          :key="index"
          :label="item.name + '(' + item.evalDetailedList.length + '次)'"
        >
          <eval-table :list="item" ref="evalTable" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import EvalTable from './Table'
import { removeSession, setSession, getSession } from '@/utils/util'
import { startEval } from '@/api/eval'

export default {
  components: {
    EvalTable
  },
  data() {
    return {
      tabPosition: 'left',
      row: this.$route.params.row || getSession('evalListRow'),
      listData: [],
      tableArr: []
    }
  },
  async created() {
    if (this.$route.params.row) {
      setSession('evalListRow', this.$route.params.row)
    }
    console.log('row', this.row)

    if (this.row) {
      const res = await startEval(this.row.evalPlanId)
      console.log('startEval list', res.data)

      if (res && res.data.length > 0) {
        let arr = []
        let all = []
        res.data.map(v => {
          console.log('v', v)
          if (v.evalDetailedList.length === 1) {
            if (!v.evalDetailedList[0].executorTime) {
              v.evalDetailedList.splice(0, 1)
            }
          }
        })
        res.data.map(v => {
          if (v.evalDetailedList && v.evalDetailedList.length > 0) {
            all = [...all, ...v.evalDetailedList]
          }
        })
        this.tableArr = [...arr]
        res.data.unshift({
          name: '总计分类',
          evalDetailedList: all,
          size: null
        })

        this.listData = res.data
      }
    } else {
      this.$message.error('页面发生错误，即将跳转回列表页')
      setTimeout(() => {
        this.$router.push({
          name: 'evaluateMyPlan'
        })
      }, 1000)
    }
  },
  methods: {
    handleBack() {
      this.$router.go(-1)
      removeSession('evalListRow')
    }
  }
}
</script>

<style scoped>
.classify-tabs >>> .el-tabs__item {
  text-align: left;
  width: 240px;
}
</style>
